
<div class="container">
  <!DOCTYPE html>
<html lang="zh-cn">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">




<title>Css | Miles`s</title>

<link rel="stylesheet" href="https://mada.gitee.io/notes//css/styles.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/zenburn.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="https://mada.gitee.io/notes//js/highlight.js"></script>






  <div class="container">
    <nav class="navbar level">
      <div class="navbar-brand">
          <a class="nav-item" href="https://mada.gitee.io/notes/"><h1 class="title is-3">Miles`s</h1></a>
      </div>           
      <div class="navbar-menu has-text-centered is-active">
          <div class="navbar-end is-centered">
              
           </div>
      </div>
    </nav>
  </div>
  <main class="container">
      
      
      <h1 class="title is-3">2016</h1>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Oct 13</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/grid/">CSS Grid</a></h1>
          <div class="content is-hidden-mobile">
            CSS Grid 介绍 CSS Grid 布局是一个二维基于网格的布局系统，目的是彻底改变我们设计基于网格的用户界面。CSS一直被用于布局网页，但是一直没有做好。一开始我们用tables，接着floats，positions和inline-block，但是所有的这些方法本质上都是hacks并且遗留了很多的问题（比如，垂直居中）。Flexbox横空出世，但是它是针对简单的一维布局，没有完全的二维布局。Grid是迄今为止最先的特殊设计的 css 模型，目的是解决迄今为止我们开发网页的时候遇到的布局问题。
父元素属性 display 值： * grid - 块级grid * inline-grid 内联grid
.container{ display: grid|inline-grid; }  Note: column,float,clear,vertical-align对container没有 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/grid/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Jun 21</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/font/">CSS Font</a></h1>
          <div class="content is-hidden-mobile">
            Font 继承性
font-face  @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }  字体系列 Serif 衬线字体 这些字体成比例，而且有上下 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/font/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Apr 21</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/flex/">Flex</a></h1>
          <div class="content is-hidden-mobile">
            Flex 浏览器支持性：ie10+, 其他主流浏览器
可以简便，完整，响应式的实现各种布局
Flexible box 弹性布局
定义  .box{ display:-webkit-flex; display:flex; }  行内元素也可以使用Flex布局
 .box{ display:inline-flex; }  Notes: 元素设置flex之后，float clear vertical-align
基本概念 Flex容器（flex container） Flex项目（flex item）
容器默认存在两根轴： - x轴（main axis）： main start &ndash; main end - y轴（cross axis）： cross start &ndash; cross end
容器的属性 - flex-direction - flex-wrap - …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/flex/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      
      
  </main>
  <section class="section">
  <div class="container">
    <nav class="level is-mobile">
      <div class="level-left">
        <div class="level-item">
          
          <a class="button is-rounded" disabled>
            <span class="icon is-small is-marginless">
              <i class="fa fa-angle-left"></i>
            </span>
            上一页
          </a>
          
        </div>
      </div>
      <div class="level-right is-marginless">
        <div class="level-item">
          
          <a class="button is-rounded" disabled>
            下一页
            <span class="icon is-small is-marginless">
              <i class="fa fa-angle-right"></i>
            </span>
          </a>
          
        </div>
      </div>
    </nav>
  </div>
</section>

  <section class="section">
  <div class="container has-text-centered">
    <p></p>
  </div>
</section>


</div>